import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Tag, DatePicker} from "antd";
// http
import http from '../../../utils/request';


class CloudAlarmMonitorResourceLabelDivisionMiss extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            dates: null,
            columns: [
                {title: "日期", dataIndex: "date", key: "date", width: "100px"},
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform", width: "260px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "缺失标签", dataIndex: "resource_list", key: "resource_list",
                    render: (text, rowData) => {
                        return(
                            <div>
                                {rowData.resource_list}
                            </div>
                        )
                    }
                },
            ],
            loading: false,
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'date': this.state.dates,
        }
        // 获取分组列表
        http.get('/alarm/monitor/resource/label_division', {params: requestData}).then(response=>{
            console.log(response.data.data.items)
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }


    // 搜索切换应用类型
    onChangeNameSpace = (value) => {
        if (value) {
            this.setState({
                search_namespace: value
            })
        } else {
            this.setState({
                search_namespace: null,
            })
        }
    }

    onChange = (value, dateString) => {
        this.setState({
            dates: dateString
        })
    }

    render(){
        const { loading, dataSource, columns, page, total } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {marginTop: '10px', marginBottom: '10px'}
        return (
            <Fragment>

                <div style={myStyle1}>
                    <DatePicker style={{ width: '200px' }} onChange={this.onChange} />
                    <span style={{ marginLeft: '15px'}}>
                        <Button type="primary" htmlType="submit" onClick={this.loadData}>搜索</Button>
                    </span>
                </div>
                
                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 500, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}
export default CloudAlarmMonitorResourceLabelDivisionMiss;